<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link rel="stylesheet" href="../res/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../res/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="../res/jquery-3.5.1.min.js"></script>
    <script src="../res/popper.min.js"></script>
    <script src="../res/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
    <script src="./res/layer/layer.js"></script>
    <style>
        .form-text {
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-primary" id="btn_add"><i class="fa fa-plus-square" aria-hidden="true"></i>&nbsp;添加
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-primary" id="btn_del"><i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-primary" id="btn_edit"><i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-primary" id="btn_info"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;查看
</button>

<table class="table table-hover table-bordered">
    <thead class="thead-light">
    <tr align="center">
        <th><input type="checkbox" id="isAll"></th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>出生日期</th>
    </tr>
    </thead>
    <tbody>
    <#list emps as emp>
        <tr align="center">
            <td><input type="checkbox" name="id" class="form-check" value="${emp.id}"></td>
            <td>${emp.name}</td>
            <td>${emp.age}</td>
            <td>
                <#if emp.gender == 1>精神小伙儿
                <#elseif emp.gender == 0>扒蒜小妹儿
                <#else>东方不败
                </#if>
            </td>
            <td>${emp.birthday?string("yyyy-MM-dd")}</td>
        </tr>
    </#list>
    </tbody>
</table>
<!-- 新增员工模态框 -->
<div id="addModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">员工信息</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="nickname">姓名</label>
                        <input class="form-control form-add" id="nickname" type="text" placeholder="" name="name"
                               value=""
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="idCard">身份证</label>
                        <input class="form-control form-add" id="idCard" type="text" placeholder="" name="idCard"
                               value="" autocomplete="off">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" id="add_submit" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 员工信息模态框 -->
<div id="infoModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">员工信息</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="nickname">姓名</label>
                        <input class="form-control form-edit" id="info_nickname" readonly type="text" placeholder=""
                               name="name"
                               value=""
                               autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="idCard">身份证</label>
                        <input class="form-control form-edit" id="info_idCard" readonly type="text" placeholder=""
                               name="idCard"
                               value="" autocomplete="off">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function (e) {
        $('#addModal').on('show.bs.modal', function (e) {
            var $this = $(this);
            var $modal_dialog = $this.find('.modal-dialog');
            $this.css('display', 'block');
            $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2 - 30)});

        });
        var addOrSave = true;
        $('#btn_add').on('click', function (e) {
            e.preventDefault();
            addOrSave = true;
            $("#addModal").modal({backdrop: true, keyboard: true});
        });
        $('#add_submit').on('click', function (e) {
            e.preventDefault();
            let data = {};
            let forms = $('.form-add');
            $.each(forms, function (index, input) {
                data[input.name] = input.value;
            });
            if (!addOrSave){
                let list = sessionStorage.getItem('ids');
                data['ids'] = JSON.parse(list);
            }
            window.console.log(data);
            let methodName = addOrSave ? 'add' : 'save';
            $.ajax({
                method: "post",
                url: '/freemaker.action?methodName=' + methodName,
                async: false,
                data: data,
                dataType: 'json',
                success: function (respose) {
                    switch (respose.code) {
                        case "200": {
                            window.location.replace("/freemaker.action?methodName=forwordTable");
                            break;
                        }
                    }
                }
            });
        });
        $('#isAll').change(function (e) {
            if ($('#isAll').is(':checked')) {
                $('.form-check').each(function (index, element) {
                    if (!element.checked) {
                        element.checked = true;
                    }
                });
            } else {
                $('.form-check').each(function (index, element) {
                    if (element.checked) {
                        element.checked = false;
                    }
                });
            }
        });
        $('.form-check').click(function (e) {
            e.preventDefault();
        });
        $('tr').slice(1).click(function (e) {
            // let checkbox = $("input[type='checkbox']",this)[0];
            let checkbox = $("input:checkbox", this)[0];
            if (checkbox.checked) {
                checkbox.checked = false;
            } else {
                checkbox.checked = true;
            }
            check($('.form-check'));
        })

        function check(items) {
            let flag = true;
            $(items).each(function (index, element) {
                if (!element.checked) {
                    flag = false;
                }
            });
            let isAll = window.document.querySelector(`#isAll`)
            isAll.checked = flag;
        }

        $('#btn_del').click(function (e) {
            e.preventDefault();
            let list = new Array();
            $('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            if (list.length > 0) {
                $.ajax({
                    method: "post",
                    url: '/freemaker.action?methodName=del',
                    async: false,
                    data: {ids: list},
                    dataType: 'json',
                    success: function (respose) {
                        switch (respose.code) {
                            case "200": {
                                window.location.replace("/freemaker.action?methodName=forwordTable");
                                break;
                            }
                        }
                    }
                });
            } else {
                layer.msg('请选择要删除的员工', {icon: 2});
            }
        });
        $('#btn_info').click(function (e) {
            e.preventDefault();
            let list = new Array();
            $('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            if (list.length > 0) {
                $.ajax({
                    method: "post",
                    url: '/freemaker.action?methodName=info',
                    async: false,
                    data: {ids: list},
                    dataType: 'json',
                    success: function (respose) {
                        switch (respose.code) {
                            case "200": {
                                $("#infoModal").modal({backdrop: true, keyboard: true});
                                $('#info_nickname').val(respose.data.name);
                                $('#info_idCard').val(respose.data.idCard);
                                break;
                            }
                        }
                    }
                });
            } else {
                layer.msg('请选择要查看的员工', {icon: 2});
            }
        });
        $('#btn_edit').click(function (e) {
            e.preventDefault();
            addOrSave = false;
            let list = new Array();
            $('.form-check').each(function (index, element) {
                if (element.checked) {
                    list.push(element.value);
                }
            });
            sessionStorage.setItem('ids',JSON.stringify(list));
            if (list.length > 0) {
                $.ajax({
                    method: "post",
                    url: '/freemaker.action?methodName=info',
                    async: false,
                    data: {ids: list},
                    dataType: 'json',
                    success: function (respose) {
                        switch (respose.code) {
                            case "200": {
                                $("#addModal").modal({backdrop: true, keyboard: true});
                                $('#nickname').val(respose.data.name);
                                $('#idCard').val(respose.data.idCard);
                                break;
                            }
                        }
                    }
                });
            } else {
                layer.msg('请选择要查看的员工', {icon: 2});
            }
        });
    });
</script>